<template>
  <!-- 外围最大的盒子 -->
  <div class="picture">
    <!-- 内容区域 -->
    <div class="content" v-if="!imgShow">
      <!-- 地图列表 -->
      <div class="myListOne">
     <div class="myMap">地图列表</div>
        <van-list class="myList">
          <van-cell
            @click="examine(item)"
            v-for="(item, index) in mapList"
            :class="[
              'tr-color-1' + (index % 2),
              { active: activeIndex === item },
            ]"
            :title="item"
            :key="index"
            ><van-icon name="close" size="28" color="#fff" @click="delet(item)"
          /></van-cell>
        </van-list>
        <van-cell
          id="new"
          title="+"
          style="background-color: #e7f7f7; color: #26d473"
          @click="establish"
        />
      </div>

      <!-- 组件右侧和中间的内容区域 -->
      <List
        class="childrenList"
        :list="mapList"
        :newList="newList"
        :projectname="projectname"
        :newfilename="newfilename"
        :seveShow="seveShow"
        @onhide="onhide"
        :newimage="newimage"
        @empty="empty"
        :keyshow='keyshow'
        @openKey='openKey'
        :addList='addList'
      />
    </div>
    <div class="zhouimg">
      <img src="../../assets/zhou3.png" alt="">
    </div>
    <!-- 键盘区域 -->
    <div class="keyboard-mask" v-if="keyshow">
      <keyboard @onChange="onChange" @onKeyPress="onKeyPress" />
    </div>
  </div>
</template>
<script>
      import Cookies from 'js-cookie'
// 导入提示确认框组件
import { Dialog } from "vant";
// 导入yaml格式进行获取到数据的转换
import yaml from "js-yaml";
// 导入获取地图的接口
import {
  mapgeApit,
  addApi,
  cancelApi,
  saveApi,
  overApi,
  deleteApi,
  getpicApi
} from "@/api/map";
export default {
  data() {
    return {
      seveShow: false, //控制保存按钮和取消那妞的显示和隐藏
      keyshow: false, //控制键盘的显示和隐藏
      formKey: 0,
      fromShow: false,
      imgShow: false, //控制显示和隐藏
      num: 0.5, //图片倍数
      // activeKey: 0, //控制选项高亮的
      list: [], //保存返回数据的数组
      // 设置当前选中的一级分类
      activeIndex: 0,
      newList: [], //保存点击每一项的数据
      cmd: 12,
      projectname: "slam", //需要保存的数据参数
      filename: "", //需要保存的数据参数
      newfilename: "", //进行二次分割后的名字
      mapList: [], //定义一个数组用来保存地图数据列表
      newparamsList: "", //定义一个新的项目名
      myimage: "", //保存地图数据，
      width: "", //保存宽度
      height: "", //保存高度
      newimage: "", //保存切换后的base64图片数据
    };
  },
  //在页面一打开就发送请求获取数据
  created() {
    this.addList(); //一进入页面获取地图数据列表
    this.gain(); //获取地图
  },
  methods: {
      //-------------------------------------------------------------键盘输入事件
    onChange(input) {
      // input 是当前点击按钮的值
      this.newfilename = input; //把点击的那一项的值赋值给输入框
    },

    //删除和确认按钮
    onKeyPress(button) {
      if (button == "{enter}") {
        // 如果按确认键的相应操作
        this.keyshow = false;
      }
      if (button == "{bksp}") {
        // 删除键的相应操作
      }
    },

    //打开键盘
    openKey(val){
      //生成自定义事件把子组件中传入的值进行赋值
      this.keyshow=val
    },

  //-------------------------------------------------------------键盘输入事件
    //自定义事件把选中列表清空
    empty(val) {
      // 把选中的值清空
      this.newList = val;
      //把选中的下标清空
      this.activeIndex = val;
      this.newfilename=val
    },
    //点击地图列表信息每一项切换到对应的地图页面
    async examine(item) {
      //传入一个id用来判断选中的那一项
      this.activeIndex = item; //在把传过来的id赋值给定义好的变量
      this.newList = item; //保存点击的那一项到新的数组中
      let mapDatas = Cookies.get(item);
      if(mapDatas == undefined){
        //发送切换地图接口请求
        let res = await getpicApi({
          filename: item, //传入你点击的那一项地图名字
        });
        // console.log(item,'点击的这一项');
        // console.log(res.data);

        //获取到点击每一项的图片信息
        this.newimage = yaml.load(res.data).data;
        console.log(1)
        Cookies.set(item, yaml.load(res.data).data);
        console.log(2)

      }else{
        this.newimage = mapDatas;
      }
      
    },

    //获取地图列表数据
    async addList() {
      // 发送请求新增地图
      let res = await addApi(this.cmd); //发送请求传入参数
      this.mapList = res.data.split(","); //进行字符串分割
      console.log(this.mapList);
    },

    //新建地图按钮
    async establish() {
      this.seveShow = true;
      console.log(11);
      let res = await mapgeApit(this.cmd);
      this.$toast.success("开始构图");
    },
    //用来获取数据的方法
    gain() {
        let ws = new WebSocket("ws://"+window.location.hostname+":10009");  //获取本地服务器端口号
       //    let ws = new WebSocket("ws://192.168.20.101:10009");
      ws.onmessage = (e) => {
        //使用箭头函数改变this的指向
        // 当服务器有消息，就会自动调用这个函数
        // e.data有服务器返回的数据
        const res = yaml.load(e.data); //使用yaml格式进行转换
        if (res.uri == "/sirius/topics/slam_grid_map") {
          //判断res中的uri路劲是不是等于有图片的路径
          this.myimage = res.data; //如果等于就把里面中有的data进行base格式进行拼接
          this.width = res.info.width; //保存宽度
          this.height = res.info.height; //保存高度
        }
      };
    },

    //自定义事件改变父组件中的值
    onhide(val) {
      this.seveShow = val;
      this.keyshow=val
    },

    // 删除按钮注册事件
    delet(item) {
      //提示用户是否要真的删除
      Dialog.confirm({
        title: "温馨提示",
        message: `您确定要删除名称为${item}信息嘛`,
      })
        // 点击确认时触发这个下面这个点then方法回调函数
        .then(async () => {
          this.$toast.success("删除成功"); //提示用户删除成功
          //发送请求向服务器删除数据
          let res = await deleteApi({
            projectname: this.projectname, //传入参数
            filename: this.newList, //传入参数
          });
          this.addList(); //调用获取地图列表数据的方法刷新页面
        })
        // 点击取消调用catch的方法提示用户
        .catch(() => {
          this.$toast.success("取消成功");
        });
    },
  },
};
</script>
<style lang="less" scoped>
.picture {
  position: fixed;
  top: 70px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #12151a;
}
.van-cell {
  margin-left: 10px;
  margin-top: 3px;
  width: 180px !important;
  background-color: #1a1c25 !important ;
  height: 50px;
  color: #fff;
  text-align: center;
  &.active {
    background-color: #030305 !important;
    color: skyblue;
    position: relative;

    &::before {
      content: "";
      width: 4px;
      height: 60px;
      background-color: skyblue;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .van-cell__title {
    span {
      font-size: 18px;
      // font-weight: 700;
      // line-height: px;
    }
  }
}
.tr-color-10 {
  background-color: #181a23 !important;
}
.tr-color-11 {
  background-color: #181a23 !important;
}
#new {
  .van-cell__title {
    // background-color: #1a1c25 !important;
    border-radius: 5px;
    span {
      font-size: 44px !important;
      padding: 5px;
      font-weight: 400 !important;
    }
  }
}

.content {
  margin-top: 40px;
  display: flex;
  height: 100%;
  .myListOne {
    width: 25% auto;
    height: 100%;
    .myMap{
      background-color:#1a1c25;
      margin-left: 10px;
      color: #fff;
      font-size: 20px;
      text-align: center;
      height: 50px;
      line-height: 50px;
      font-weight: 700;
    }
    .myList {
      height: 250px;
      overflow-x: hidden;
      overflow-y: auto;
      .myList::-webkit-scrollbar {
        display: none;
      }
    }
    /deep/::-webkit-scrollbar {
      width: 5px;
      height: 10px;
      background: #33333300;
      /**/
    }
    /deep/::-webkit-scrollbar-track {
      background: rgb(239, 239, 239, 0);
      border-radius: 2px;
    }
    /deep/::-webkit-scrollbar-thumb {
      background: rgba(192, 176, 33);
      border-radius: 10px;
    }
    /deep/::-webkit-scrollbar-thumb:hover {
      background: #33333300;
    }
    /deep/::-webkit-scrollbar-corner {
      background: #33333300;
    }
    /deep/::-webkit-scrollbar-track {
      background: #33333300;
    }
  }
  .btn-primary {
    width: 120px;
    margin-top: 20px;
    background-color: #ffc000 !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    color: black !important;
  }
}

.newmap {
  margin-left: 100px;
  overflow: hidden;
  text-align: center;
  .myimage {
    border: none !important;
  }
  .sonbutton {
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    .van-button {
      margin-right: 10px;
      font-size: 24px;
      width: 200px;
      height: 50px;
      background-color: white;
      border: none;
      color: black;
      font-weight: 700;
    }
  }
}
::v-deep .van-form .van-cell {
  margin-left: 20px !important;
  background-color: white !important;
}
::v-deep .van-field__body {
  width: 400px !important;
}
#new:hover {
  background-color: #fac018 !important;
}

.keyboard-mask {
  width: 80%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 20%;
  z-index: 4000;
}


</style>
